<template>
  <div>
    <div>
      <van-sticky>
        <van-nav-bar title="电话咨询" left-arrow @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div class="phone-consultation">
      <div class="progress-bar">
        <span
          ><h2 style="display: inline-block">1</h2>
          /3 病情描述</span
        >
        <van-progress :percentage="30" :show-pivot="false" />
      </div>
      <div class="describe-illness">
        <div class="consultatioSumWrapTitle">
          <h2>请描述您的病情</h2>
          <p>如何描述?</p>
          <span>导入病情</span>
        </div>
        <van-cell-group inset>
          <van-field
            v-model="illnessDescription"
            rows="2"
            autosize
            type="textarea"
            maxlength="最少还要描述10字"
            placeholder="为了更好获得医生帮助,请尽可能详细描述病情"
            show-word-limit
          />
        </van-cell-group>
        <p
          class="illness-description-limit"
          v-if="illnessDescription.length > 0 && illnessDescription.length < 10"
        >
          最少还要描述{{ 10 - illnessDescription.length }}字
        </p>
      </div>
      <div class="need-medication-guidance">
        <van-checkbox v-model="checked" class="checkbox">
          <h3>需要医生指导用药</h3>
        </van-checkbox>
      </div>
      <div class="upload-files" v-if="fileList.length < 1">
        <dl>
          <dt><van-uploader v-model="fileList" multiple :max-count="9" /></dt>
          <dd>
            <span class="upload-label">上传检查报告或患处照片(最多9张)</span>
            <span class="upload-note">照片仅自己和医生可见</span>
          </dd>
        </dl>
      </div>
      <div class="upload-files" v-else>
        <van-uploader v-model="fileList" multiple :max-count="9" />
      </div>
      <div class="attention">
        <dl>
          <dt>
            <img src="https://kano.guahao.com/oTs381464053?webp=80" alt="" />
          </dt>
          <dd>
            <p>
              请注意 <span class="highlight">95169</span> 或
              <span class="highlight">0571</span> 开头的来电
              如无法接通，医生或以<span class="highlights">语音通话</span
              >的方式联系
            </p>
          </dd>
        </dl>
      </div>
      <button class="next-step" @click="handleNextStep">下一步</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import instance from "../axios/index";
import { useCounterStore } from "../pinia/index";
import { showToast } from "vant";
const commentData = ref([]);
interface UserInfo {
  name: string;
  img: string;
  id: string;
}
const store = useCounterStore();
const list = ref<UserInfo>(store.data);
instance.post("/api/homeall").then((res) => {
  res.data.data.forEach((item: any) => {
    if (item.id === list.value.id) {
      commentData.value.push(item);
    }
  });
});
import { useRouter } from "vue-router";
const router = useRouter();
// 上传文件列表的存储列表
const fileList = ref([]);
// 病情描述输入框的绑定数据
const illnessDescription = ref("");
// 是否需要医生指导用药的绑定数据
const checked = ref(false);
// 处理下一步按钮点击的方法（这里只是一个示例，实际可能需要更多逻辑）
const handleNextStep = () => {
  if (illnessDescription.value.length < 10) {
    showToast("病情描述至少需要10个字");
  } else {
    router.push("/consultationSumone");
  }
};

const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
.phone-consultation {
  padding: 0.2rem;
}
.progress-bar {
  margin-bottom: 0.2rem;
  padding-bottom: 0.1rem;
}

.progress-bar span {
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.1rem;
}

.describe-illness {
  margin-bottom: 0.2rem;
  height: 1.5rem;
}
.illness-description-limit {
  color: red;
}

.describe-illness input {
  width: 90%;
  height: 1rem;
  border-bottom: 1px solid #000;
  border-color: red;
  border-radius: 0.5rem;
  box-sizing: border - box;
}

.need-medication-guidance {
  padding-bottom: 0.1rem;
  border-bottom: 1px solid #e2e3e7;
}

.upload-files {
  margin-top: 0.25rem;
  padding-bottom: 0.15rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #e2e3e7;
}
.upload-files dl {
  display: flex;
  height: 0.8rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.1rem;
}

.upload-files dt {
  width: 0.8rem;
  padding-top: 0.1rem;
  color: #fff;
  text-align: center;
}
.upload-files dd {
  margin-left: 0.1rem;
}

.upload-label {
  display: inline-block;
  margin-bottom: 0.1rem;
}

.upload-note {
  font-size: 0.12rem;
  color: gray;
}
.attention dl {
  display: flex;
  align-items: center;
}
.attention dt {
  width: 1rem;
  height: 0.5rem;
}
.attention dt img {
  width: 100%;
  height: 100%;
}
.attention dd {
  font-size: 0.14rem;
  padding-left: 0.1rem;
  font-weight: 600;
}

.highlight {
  color: #ff695c;
}
.highlights {
  color: #3f86ff;
}

.next-step {
  position: fixed;
  bottom: 0;
  left: 3%;
  width: 94%;
  padding: 0.1rem;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 2rem;
}
.consultatioSumWrapTitle {
  position: relative;
  margin-bottom: 0.1rem;
}
.consultatioSumWrapTitle h2 {
  display: inline-block;
}
.consultatioSumWrapTitle p {
  display: inline-block;
  margin-left: 0.1rem;
  color: #3f86ff;
}
.consultatioSumWrapTitle span {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>